<!--  -->
<template>
  <div>
    <el-dialog
      title="线段拆分"
      :visible.sync="dialogVisible"
      width="1200px"
      top="10px"
      :before-close="handleClose"
      class="xdcfDialogClass"
      :close-on-click-modal="false"
    >
      <div class="xd-container">
        <h4 class="xd-title">中压注册线段拆分</h4>
        <div class="xd-form">
          <el-form :model="czform" ref="ruleForm" :rules="splitRules">
            <el-row class="form-header">
              <el-col :span="6">
                <el-form-item
                  class="xdcf-form-item"
                  label="原线段编码"
                  label-width="90px"
                >
                  <el-input
                    class="item-input"
                    size="mini"
                    v-model="czform.xdbm"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  class="xdcf-form-item"
                  label="原线段名称"
                  label-width="90px"
                >
                  <el-input
                    class="item-input"
                    size="mini"
                    v-model="czform.xdmc"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  class="xdcf-form-item"
                  label="注销日期"
                  label-width="90px"
                  prop="zxrq"
                  required
                >
                  <el-date-picker
                    size="mini"
                    v-model="czform.zxrq"
                    class="item-input"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期"
                    :clearable="false"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  class="xdcf-form-item"
                  label="拆分原因"
                  label-width="90px"
                >
                  <el-input
                    class="item-input"
                    size="mini"
                    v-model="czform.cfyy"
                    placeholder="请输入原因"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="form-item">
              <div class="xdcf-form">
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="线段编码"
                      label-width="110px"
                      prop="xdbm"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.xdbm"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="线段名称"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.xdmc"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="注册日期"
                      label-width="110px"
                      required
                    >
                      <el-date-picker
                        size="mini"
                        v-model="czform.zcrq"
                        class="item-input-xd"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                        :clearable="false"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="出现开关"
                      label-width="110px"
                    >
                      <el-checkbox v-model="czform.cxkg"></el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="电压等级"
                      label-width="110px"
                      required
                    >
                      <el-select
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.dydj"
                        placeholder="请选择"
                      >
                        <el-option label="6" value="0"></el-option>
                        <el-option label="10" value="1"></el-option>
                        <el-option label="20" value="2"></el-option>
                      </el-select>
                      <span>kV</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="地区特征码"
                      label-width="110px"
                      required
                    >
                      <el-select
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.dqtzm"
                        placeholder="请选择"
                      >
                        <el-option label="市中心" value="0"></el-option>
                        <el-option label="市区" value="1"></el-option>
                        <el-option label="城镇" value="2"></el-option>
                        <el-option label="农村" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="开关编号"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.kgbh"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="开关类型码"
                      label-width="110px"
                      required
                    >
                      <el-select
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.kglxm"
                        placeholder="请选择"
                      >
                        <el-option label="熔断器" value="0"></el-option>
                        <el-option label="少油断路器" value="1"></el-option>
                        <el-option label="真空断路器" value="2"></el-option>
                        <el-option label="SF6断路器" value="3"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="电缆长度"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.dlcd"
                      ></el-input>
                      <span>km</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="开关设备台数"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.kgsbts"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="架空裸导线"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.jkldx"
                      ></el-input>
                      <span>km</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="断路器台数"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.dlq"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="架空绝缘线"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.jkjyx"
                      ></el-input>
                      <span>km</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="电容器台数"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.drq"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="线路合计"
                      label-width="110px"
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.xlhj"
                        disabled
                      ></el-input>
                      <span>km</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="xdcf-form-item"
                      label="开闭所室数"
                      label-width="110px"
                      required
                    >
                      <el-input
                        class="item-input-xd"
                        size="mini"
                        v-model="czform.kbsss"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="xdcf-table">
                <div class="yh-title">
                  <span>线段（1）下属用户</span>
                  <el-button size="mini" type="primary" style="float: right" @click="handleAddYh"
                    >添加</el-button
                  >
                </div>
                <el-table
                  :data="tableList"
                  border
                  style="width: 100%"
                  height="260px"
                  size="mini"
                  v-loading="listLoading"
                  highlight-current-row
                  stripe
                >
                  <el-table-column
                    label="序号"
                    align="center"
                    fixed="left"
                    type="index"
                    width="50"
                  />
                  <el-table-column
                    prop="yhbm"
                    label="用户编码"
                  ></el-table-column>
                  <el-table-column
                    prop="yhmc"
                    label="用户名称"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
          </el-form>
        </div>
        <div class="cf-divider">
          <el-button
            type="primary"
            class="th-row"
            size="mini"
            @click="cccEvent('show', zczyXdsjColumnTable)"
            >列配置
          </el-button>
        </div>
        <el-table
          :data="xdcfData"
          border
          size="mini"
          stripe
          height="250"
          ref="splitTable"
          @row-click="rowClick"
        >
          <el-table-column
            label="序号"
            type="index"
            show-overflow-tooltip
            width="50"
            align="center"
            fixed="left"
          >
          </el-table-column>
          <template v-for="col in column">
            <el-table-column
              :show-overflow-tooltip="true"
              :key="col.id"
              :prop="col.field"
              :label="col.title"
              :min-width="col.minWidth"
              :align="col.align"
              :header-align="col.align"
              :sortable="col.sortable"
              :formatter="col.formatter"
              :fixed="col.fixed"
            ></el-table-column>
          </template>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="left-footer">
          <el-input-number
            size="mini"
            :min="2"
            :max="10"
            v-model="num"
          ></el-input-number>
          <el-button type="primary" size="mini" @click="handleInitialize"
            >初始化</el-button
          >
        </div>
        <el-button size="mini" @click="handleClose">取消拆分</el-button>
        <el-button size="mini" type="primary" @click="confirm"
          >确认拆分</el-button
        >
      </span>
    </el-dialog>
    <ccc ref="ccc"></ccc>
    <zczyXdsplitYh :splitYhdata="splitYhdata"></zczyXdsplitYh>
  </div>
</template>

<script>

import { checkZczyXdbm } from "@/api/sjwh/zczy.js";
import { checkSpecialKey, compareDate, floatAdd } from '@/utils/validate.js';
import ccc from "@/dialogCommom/ccc";
import zczyXdsplitYh from "./zczyXdsplitYh";
export default {
  props: {
    propXdsplitData: {
      type: Object,
      default: function () {
        return {};
      },
    },
    zczyColumnCf: {
      type: Array || Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    const that = this
   const checkXdbm = (rule, value, callback) => {
     
          if (value) {
            let reg = /^([\u4e00-\u9fa5]{2})([0-9]{3})([\s\S]{0,7})$/
            if (reg.test(value)) {
                if (checkSpecialKey(value)) {
                    let vo = {
                        // dwbm: that.addForm.dwbm,
                        xdbm: that.czform.xdbm,
                        // zcrq: that.addForm.zcrq
                    }
                    checkZczyXdbm(vo).then(res => {
                        if (res.code == 0 && res.data) {
                            callback()
                        } else {
                            callback('线段编码重复')
                        }
                    })
                } else {
                    callback('禁止输入`~!#$%^&*等特殊字符')
                }
            } else {
                callback('2汉字+3数字+0~7字符')
            }
          } else {
            callback('请输入线段编码')
          }         
        }
    return {
      num: 2,
      zczyXdsjColumnTable: "zc_zyxdsj", // 中压注册线段列配置参数
      dialogVisible: false,
      column: [],
      xdRow: {},
      dwbm: "",
      dialogVisible: false,
      czform: {
        xdbm: "", //线段编码
        xdmc: "", //线段名称
        zxrq: "", //责任日期
        cfyy: "", //拆分原因
        zcrq: "", //注册日期
        cxkg: "", //出现开关
        dydj: "", //电压等级
        dqtzm: "", //地区特征码
        kgbh: "", //开关编号
        kglxm: "", //开关类型码
        dlcd: "", //电缆长度
        kgsbts: "", //开关设备台数
        jkldx: "", //架空裸导线
        dlq: "", //断路器台数
        jkjyx: "", //架空绝缘线
        drq: "", //电容器台数
        xlhj: "", //线路合计
        kbsss: "", //开闭所室数
      },
      splitRules: {
        xdbm: [
          { required: true, validator: checkXdbm, trigger: 'blur' }
        ],
      },
      tableList: [
        {
          yhbm: "32s121",
          yhmc: "用户一",
        },
        {
          yhbm: "21135",
          yhmc: "用户二",
        },
      ],
      listLoading: false,
      xdcfData: [],
      splitYhdata: {
        dialogVisible: false,
        xdId: ""
      }
    };
  },

  components: {
    ccc,
    zczyXdsplitYh
  },

  computed: {},

  watch: {
    propXdsplitData(newVal, oldVal) {
      console.log("newVal", newVal);
      if (newVal) {
        this.dialogVisible = newVal.dialogVisible;
        this.xdRow = newVal.xdRow[0];
        for (let i = 0; i < 2; i++) {
          this.xdcfData.push(this.xdRow);
        }
        // this.xdcfData = newVal.xdRow;
      }
    },
    zczyColumnCf(newVal, oldVal) {
      if (newVal) {
        // this.column = newVal;
      }
    },
  },

  created() {
    this.cccEvent("load", this.zczyXdsjColumnTable);
  },

  mounted() {},

  beforeUpdate() {
    //解决列配置引发的滚动条问题
  },
  methods: {
    /**确认拆分 */
    confirm() {
      console.log("确认拆分");
      const set = this.$refs;
      set["ruleForm"].validate((valid) => {
        //表单填写信息校验
        if (valid) {
        }
      });
    },

    /**添加用户 */
    handleAddYh() {
      console.log('添加用户')
      this.splitYhdata = JSON.parse(JSON.stringify({
        dialogVisible: true,
        xdId: this.propXdsplitData.xdRow[0].id
      }))

    },

    /**点击表格 */
    rowClick(row) {
      console.log("row", row);
    },

    /**初始化 */
    handleInitialize() {
      console.log("this.num", this.num);
      this.xdcfData = [];

      for (let i = 0; i < this.num; i++) {
        let xdRow = JSON.parse(JSON.stringify(this.xdRow));
        let token = new Date().getTime();
        let xdRowOther = {
          byqrl: 0,
          byqts: 0,
          comm: null,
          cxkg: "0",
          czbj: "1",
          czsj: "2021-01-27 10:24:36",
          czy: "如特",
          dlcd: 1,
          dlqts: 0,
          dqtz: "市区",
          dqtzm: "2",
          drqts: 0,
          dw: "02027171502",
          dwbm: "02027171502",
          dwmc: "佛山供电局",
          dwxz: "代管",
          dwxzm: "4",
          dydj: "10",
          dydjm: "2",
          ghtz: "A",
          gybrl: 0,
          gybts: 0,
          gyyhs: 0,
        };
        if (i < 2) {
          xdRow.aid = token + i;
          this.xdcfData.push(xdRow);
        } else {
          xdRowOther.aid = token + i;
          this.xdcfData.push(xdRowOther);
        }
      }
    },

    /**删除拆分的线段 */
    handleDelete(val) {
      console.log("删除");
      console.log("val", val);

      this.$confirm("是否删除线段？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        center: false,
      })
        .then(() => {
          this.xdcfData.splice(
            this.xdcfData.findIndex((item) => item.aid === val.aid),
            1
          );
        })
        .catch((error) => {});
    },

    /**关闭弹窗 */
    handleClose() {
      this.dialogVisible = false;
    },
    //列配置
    cccEvent(method, table) {
      if (method === "show") {
        this.$refs.ccc.show(table);
        this.$refs.splitTable.doLayout();
      } else if (method === "load") {
        new Promise((resolve, reject) => {
          this.$nextTick(() => {
            resolve(this.$refs.ccc.load(table));
          });
        }).then((response) => {
          this.column = response;
        });
      } else if (method === "export") {
        let vo = {
          tableCode: table,
          param: this.searchForm,
          url: `${dataModulePrefix}/zc-zyxdsj/page`,
          method: "POST",
          fileName: "中压注册线段",
          total: this.total,
        };
        this.$refs.ccc.exportExcel(vo);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
/deep/.el-form-item .el-form-item__content {
  line-height: 30px;
}
/deep/.el-form-item .el-form-item__label {
  line-height: 30px;
}
/deep/.el-form-item .el-form-item__error {
  top: 90%;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
.xd-container {
  width: 100%;
  .xd-title {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #3c7fc3;
    padding: 7px 0;
    margin-bottom: 0px;
    background-color: #eee;
    text-align: center;
  }
  .form-header {
    margin-top: 10px;
  }
  .el-form-item {
    height: 30px;
    margin-bottom: 0;
  }
  .item-input {
    width: 150px;
    margin-bottom: 0px;
  }
  .form-item {
    width: 100%;
    overflow: hidden;
    .xdcf-form {
      width: 55%;
      box-sizing: border-box;
      float: left;
      .item-input-xd {
        width: 150px;
      }
    }
    .xdcf-table {
      width: 45%;
      float: left;
      .yh-title {
        width: 100%;
        line-height: 28px;
        font-size: 14px;
        text-align: center;
        padding-bottom: 10px;
        overflow: hidden;
      }
    }
  }
  .xdcf-form-item {
    margin-bottom: 16px;
  }
  .cf-divider {
    position: relative;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #dcdfe6;
    .th-row {
      position: absolute;
      right: 0;
      top: -30px;
    }
  }
}
.dialog-footer {
  width: 100%;
  overflow: hidden;
  .left-footer {
    float: left;
  }
}
</style>
<style lang="scss">
.xdcfDialogClass .el-dialog__body {
  padding: 3px 10px;
}
</style>